<template>
  <div class="goods-page">
    <!-- 查询条件 -->
    <el-form :inline="true" :model="searchForm" class="filter-form">
      <el-form-item label="商品搜索:">
        <el-input v-model="searchForm.keyword" placeholder="请输入商品名称/关键词/ID" clearable />
      </el-form-item>

      <el-form-item label="商品模块:">
        <el-select v-model="searchForm.type" placeholder="全部" clearable @change="handGoodsType">
          <el-option label="全部" value="0" />
          <el-option label="领事通" value="1" />
          <el-option label="领集市" value="2" />
        </el-select>
      </el-form-item>

      <el-form-item label="所属商户:">
        <el-select
          clearable
          v-model="searchForm.sid"
          placeholder="请选择商户"
          class="ele-block"

          style="width: 300px"
          >
          <el-option v-for="item in merchantList" :key="item.id" :label="item.name" :value="item.id"/>
        </el-select>
      </el-form-item>


      <el-form-item label="商品分类:">
        <TreeSelect v-model="searchForm.cate_id"  @handleChangeInput="handleChangeInput"
         :data="treeList" @input="val => cate_id = val" />
      </el-form-item>

      <el-form-item label="添加时间:">
        <el-date-picker v-model="searchForm.dateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
          end-placeholder="结束日期" value-format="yyyy-MM-dd"></el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSearch">查询</el-button>
        <el-button @click="onReset">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="tb-box">
      <!-- 商品状态 Tabs -->
      <el-tabs v-model="activeTab">
        <el-tab-pane label="出售中的商品(5)" name="selling" />
        <el-tab-pane label="仓库中的商品(0)" name="storage" />
        <el-tab-pane label="已经售罄商品(0)" name="soldout" />
        <el-tab-pane label="警戒库存商品(0)" name="warning" />
        <el-tab-pane label="回收站的商品(0)" name="recycle" />
      </el-tabs>

      <!-- 操作按钮 -->
      <div class="toolbar">
        <el-button type="primary" @click="goAddPage">添加商品</el-button>
        <el-button type="success">商品采集</el-button>
        <el-button>批量修改</el-button>
        <el-button>商品还原</el-button>
        <el-button>数据导出</el-button>
      </div>

      <!-- 商品表格 -->
      <el-table :data="tableData" border style="width: 100%;">
        <el-table-column type="selection" width="50" />
        <el-table-column label="商品ID" prop="id" width="80" />

        <el-table-column label="商品类型" width="120">
          <template v-slot="scope">
            <span v-if="scope.row.product_type ==1">虚拟商品</span>
            <span v-else-if="scope.row.product_type ==0">普通商品</span>
            <span v-else>未知</span>
          </template>
        </el-table-column>

        <el-table-column label="商品模块" width="120">
          <template v-slot="scope">
            <span v-if="scope.row.type ==1">领事通</span>
            <span v-else-if="scope.row.type ==2">领集市</span>
            <span v-else>未知</span>
          </template>
        </el-table-column>
        <el-table-column label="商品名称" prop="store_name" />
        <el-table-column label="商品主图" width="100">
          <template v-slot="scope">
            <el-image :src="$imageFull(scope.row.image)" style="width: 60px; height: 60px" />
          </template>
        </el-table-column>
        <el-table-column label="商品售价" prop="price" width="100" />
        <el-table-column label="商品库存" prop="stock" width="100" />
        <el-table-column label="商品销量" prop="sales" width="100" />
        <!-- <el-table-column label="商品状态" prop="is_up" width="100" /> -->

        <el-table-column prop="is_up" label="状态">
          <template #default="scope">
            <el-switch v-model="scope.row.is_up" :active-value="1" :inactive-value="0" active-text="上架"
              inactive-text="下架" @change="handleStatusChange(scope.row)">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template v-slot="scope">
            <el-link type="primary" icon="el-icon-edit" @click="handleEdit(scope.row)">编辑</el-link>
            <el-popconfirm class="ele-action" title="确定要删除此站点吗？" @confirm="handleDelete(scope.row)">
              <template v-slot:reference>
                <el-link type="danger" :underline="false" icon="el-icon-delete">删除</el-link>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>

      <div class="tb-block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="searchForm.page"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="searchForm.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
    </div>
  </div>
</template>
<script>
  import TreeSelect from '@/components/TreeSelect.vue';
  export default {
    data() {
      return {
        total:0,
        activeTab: 'selling',
        treeList:[],
        merchantList:[],
        searchForm: {
          page:1,
          limit:10,
          keyword: '',
          type: '0',
          cate_id: '0',
          dateRange:''

        },
        initSearchForm:{},
        tableData: []
      };
    },
    components: {
     TreeSelect,
    },
    mounted() {
      if(this.$route.query?.sid){
        this.searchForm.sid=this.$route.query.sid
      }





      this.initSearchForm=this.searchForm
      this.getGoodsList();
      this.getTreeList();
      this.getMerchantList();

    },
    methods: {
      getMerchantList() {
        this.$httpRequest.get('/merchant/tpl').then(result => {
          this.merchantList =result;

        }).catch(e => {
          this.$message.error(e.message)
        });

      },

      handGoodsType(data){
        console.log('------handGoodsType-------',data)
        this.searchForm.type=data
        this.searchForm.cate_id='0'
        this.getTreeList();

      },
      handleChangeInput(data){
        console.log('-------handleChangeInput-------',data)
      },

      getTreeList() {
        this.$httpRequest.get('/product/category/tpl',{type:this.searchForm.type}).then(result => {
          this.treeList=result;
        }).catch(e => {
          this.$message.error(e.message)
        });
      },
      handleSizeChange(data){
        console.log('--------handleSizeChange-------',data)

      },
      handleCurrentChange(data){
        this.searchForm.page=data
        this.getGoodsList();
           console.log('--------handleCurrentChange------',data)

      },

      handleEdit(row) {

        sessionStorage.setItem('cate_id', row.cate_id);
        sessionStorage.setItem('goods_type', row.type);
        this.$router.push({
          path: '/product/index/product_edit',
          query: {
            id: row.id,
          }
        });
      },
      handleDelete(row) {
        this.$httpRequest.post('/product/delete', {
          id: row.id
        }).then(result => {
          console.log('--------delete----',result)
          this.getGoodsList();


        }).catch(e => {
          this.$message.error(e.message)
        });

      },

      getGoodsList() {
        this.$httpRequest.get('/product/list', this.searchForm).then(result => {
          console.log('----product/list----', result);

            this.tableData = result.list
            this.total = result.total

        }).catch(e => {
          this.$message.error(e.message)
        });
      },

      handleStatusChange(row) {

        let param = {
          id: row.id,
          is_up: row.is_up
        }
        let url = '/product/setIsUp'
        this.$httpRequest.post(url, param).then(result => {
          console.log('---handleStatusChange-result----', result);

        }).catch(e => {
          this.$message.error(e.message)
        });

      },
      goAddPage() {
        this.$router.push('/product/index/product_edit');
      },
      onSearch() {
        console.log('----查询条件---：', this.searchForm);
        this.getGoodsList();

      },
      onReset() {
        this.searchForm={
          keyword: '',
          type: '0',
          cate_id: '0',
          dateRange:''

        },
        this.getGoodsList();
      }
    }
  };
</script>
<style scoped>
  .goods-page {

    padding: 20px;
  }

  .filter-form {
    padding: 20px;
    background-color: #ffffff;
    margin-bottom: 20px;
  }

  .toolbar {
    margin: 20px 0 20px;
  }

  .tb-box {
    background-color: #ffffff;
    padding: 20px;
  }

  .el-tabs__active-bar {
    width: 74px !important;

  }
  .tb-block{
    padding: 20px;
  }

  /deep/ .el-tabs__item {
    font-size: 16px !important;
  }
</style>
